<template>
  <div class="study-center">
    <div class="flex justify-center py-74">
      <div class="font-bold title text-[30px]">Hi,XXXXXXXX</div>
    </div>
    <div class="w-[1180px] mx-auto flex">
      <div class="left grow">
        <h5 class="pb-20 font-bold text-[18px]">简单几步，开始售卖周边</h5>
        <div class="step-wrap">
          <div
            :style="{
              '--bgUrl':
                'url(https://res.songzhaopian.cn/rouzao-custom-platform/assets/task-1_done-ce2c529d.png)',
            }"
            class="w-146 h-280 relative"
          >
            <div class="pt-40 pb-10 text-[16px] text-center font-bold">完成个人信息</div>
            <div class="text-center text-[13px]">已完善</div>
            <div class="absolute -right-24 w-48 ">
              <img src="https://q01.yinge.cc/resource/2022/03/03/bed1f025-73d3-4677-a82a-9796343ee09c.png" alt="">
            </div>
          </div>
           <div
            :style="{
              '--bgUrl':
                'url(https://res.songzhaopian.cn/rouzao-custom-platform/assets/task-1_done-ce2c529d.png)',
            }"
            class="w-146 h-280 relative"
          >
            <div class="pt-40 pb-10 text-[16px] text-center font-bold">选择商品创作</div>
            <div class="text-center text-[13px]">已完善</div>
            <div class="absolute -right-24 w-48 ">
               <img src="https://q01.yinge.cc/resource/2022/03/03/bed1f025-73d3-4677-a82a-9796343ee09c.png" alt="">
            </div>
          </div>
           <div
            :style="{
              '--bgUrl':
                'url(https://res.songzhaopian.cn/rouzao-custom-platform/assets/task-3-cbbe9206.png)',
            }"
            class="w-146 h-280 relative"
          >
            <div class="pt-40 pb-10 text-[16px] text-center font-bold">创建拿样订单</div>
            <div class="text-center text-[13px]">去创建</div>
          </div>
        </div>
      </div>
      <div class="right w-[360px]">
        <h5 class="pb-20 font-bold text-[18px]">常见问题</h5>
        <div class="bg-white rounded-[20px] p-20">
          <template :key="item" v-for="item in 5">
            <div
              class="cursor-pointer text-[14px] h-50 leading-[50px] border-b-[1px] border-slate-[rbga(244,245,246,1)] flex justify-between"
            >
              柔造白墨功能使用教程
              <span> > </span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.study-center {
  .left {
    .step-wrap {
      display: flex;
      gap: 30px;
      > div {
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px 0px;
        background-color: #fff;
        border-radius: 20px;
        background-image: var(--bgUrl);
        background-size: contain;
      }
    }
  }
}
</style>
